<template>
	<view class="form login-form">
		<u-form :model="values" ref="uForm" :label-position="labelPosition" :rules="rules" :error-type="errorType">
			<view class="form-row" :class="{'has-left': !!field.leftIcon}" v-for="(field, index) in fields" :key="index">
				<view class="form-row-left" v-if="field.leftIcon">
					<view class="form-row-left-img">
						<image :src="field.leftIcon"></image>
					</view>
				</view>
				<view class="form-row-main">
					<u-form-item :label="field.label"  :prop="field.prop"
						:label-width="field.labelWidth" :label-align="labelAlign" :border-bottom="false">
					   
						<span style="width: 100%;">
							<!--输入框-->
							<u-input v-model="values[field.prop]"   :placeholder="field.placeholder" :border="field.border" v-if="field.type=='input'" />
							<u-input v-model="values[field.prop]" type='number'  :placeholder="field.placeholder" :border="field.border" v-if="field.type=='number'" />
							<!--密码框-->
							<u-input v-model="values[field.prop]" type="password" :border="field.border" :password-icon="passwordIcon" v-if="field.type=='password'" :placeholder="field.placeholder" />
							<!--下拉框-->
							<span v-if="field.type=='select'">
								<u-input v-model="values[field.prop]" type="select" :border="field.border" :placeholder="field.placeholder"
									@click="clickSelect(field.prop,index)" />
									<u-select v-model="field.show" :list="actionSheetList" @confirm="actionSheetCallback"></u-select>
								<!-- <u-action-sheet :list="actionSheetList" v-model="field.show" > -->
								<!-- </u-action-sheet> -->
							</span>
							<!--文本框-->
							<u-input v-model="values[field.prop]" type="textarea" :border="field.border" :auto-height="autoHeight" v-if="field.type=='textarea'" />
							<u-input v-model="values[field.prop]" type="text" :border="field.border" v-if="field.type=='text'" />
					
						</span>
						<template slot="right">
						</template>
					</u-form-item>
				</view>
				
				<view class="form-row-right" v-if="field.checked">
					<u-toast ref="uToast"></u-toast>
					<u-verification-code :seconds="seconds" @end="end"  @start="start" ref="uCode"
						@change="codeChange"></u-verification-code>
					<!-- <u-button @tap="getCode">{{tips}}</u-button> -->
						<view class="code" @click="getCode">
							<view class="tips">
								{{tips}}
							</view>
						</view>
				</view>
			</view>
			
			<slot  name="slot"></slot>
		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import {mapActions} from 'vuex'
	export default {
		props: {
			//表单绑定值
			values: {
				type: Object,
				default: {}
			},
			//表单表头
			fields: {
				type: Array,
				default: []
			},
			//label名字显示位置
			labelPosition: {
				type: String,
				default: 'left'
			},
			//表单校验规则
			rules: {
				type: Object,
				default: {}
			},
			//密码查看小眼睛
			passwordIcon: {
				type: Boolean,
				default: true
			},
			//文本框高度是否随文本变化
			autoHeight: {
				type: Boolean,
				default: false
			},
			labelAlign: {
				type: String,
				default: 'right'
			},
			actionSheetList:{
				type: Array,
			},
			name:{
				type: String,
				default:'mobile'
			},
			event:{
			type: String,
				default:'register'	
			}
		},
		data() {
			return {
				tips: '',
				seconds: 60,
				errorType: ['toast'],
				prop: '',
			}
		},
		components: {

		},
		methods: {
			...mapActions({
				identifyingCode:'LOGIN/IDENTIFYING_CODE'//获取验证码
			}),
			submit() {
				
				let flag = true
				this.$refs.uForm.validate(valid => {
					if (valid) {
						flag = true
					} else {
						flag = false
					}
				});
				return flag
			},
			actionSheetCallback(data) {
				this.values[this.prop] = data[0].value
			},
			clickSelect(val, index) {
		
				this.fields[index].show = true
				this.prop = val
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				
				if(this.values[this.name]==''){
					 this.$u.toast('请输入手机号');
                 return
				}
				if (this.$refs.uCode[0].canGetCode) {
					
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					setTimeout(() => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode[0].start();
						this.identifyingCode({mobile:this.values[this.name],event:this.event}).then(res=>{
							if(res){
                             this.$u.toast('验证码已发送');
							 this.$refs.uCode[0].start();
							}
						})
					}, 1000);
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			end() {
				
			},
			start() {
				
			}
		},
		mounted() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(){
			this.$refs.uForm.setRules(this.rules);
		},
		watch: {},
		computed: {

		},


	}
</script>

<style scoped lang='scss'>
.form-row {
	display: flex;
	margin-top: 36rpx;
	align-items: center;	
	position: relative;
	
	&-left {
		position: absolute;
		left: 38rpx;
		z-index: 3;
		
		&-img {
			uni-image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
}



.form-row-main {
	flex: 1;
}
.form-row-right {
	margin-left: 20rpx;
}
.code{
	width: 220rpx;
	height: 72rpx;
	font-size: 26rpx;
	position: relative;
	background: #4A8FF9;
	border-radius: 50px;
	color: #FFF;
	display: flex;
	align-items: center;
	justify-content: center;
}
.tips{
}

.login-form {
	/deep/ {
		.u-form-item--left {
			width: 40rpx !important;
			flex: 0 0 40rpx !important;
		}
		.u-form-item--left__content__label {
			display: none;
		}
		.u-border-bottom {
			border-radius: 50rpx !important;
			margin-top: 0px !important;
			background: #F4F7FD;
			border: 1px solid #ebeef4 !important;
			
			&::after {
				border: none;
			}
		}
	}
}
.login-form .has-left {
	/deep/ {
		.u-form-item--left {
			width: 80rpx !important;
			flex: 0 0 80rpx !important;
		}	
	}
}
</style>
